
<<template>
  <div>
  <el-upload
    class="upload-demo"
    ref="upload"
    action
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList"
    :on-success="onSuccess"
    :auto-upload="false"
    :on-change="onChange"
    >
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>

  <template v-if="filePath">
    <a :href="filePath" download="a.doc">下载</a>
  </template>


  </div>
</template>

<script>
import axios from 'axios';
  export default {
    data() {
      return {
        fileList: [],
        filePath: ''
      };
    },
    methods: {
      onSuccess(file) {
        console.log('sussess', file)
      },
      onChange(file, fileList) {
        console.log('file---', file, fileList)
        this.fileList = fileList;
      },
      async submitUpload() {
        // 在这个地方点击按钮的时候，调用接口，上传图片
        // this.$refs.upload.submit();
        console.log('this.fileList', this.fileList)
       // formData格式上传前端资源
       const formData = new FormData();
       formData.append('file', this.fileList[0].raw)
       const fileResult = await axios.post('http://localhost:3000/api/uploadImg', formData)

        console.log('1', fileResult)
        this.filePath = fileResult.data.filePath
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>
